<template>
	<view class="">
		<!-- 
		主办方:入住名称+营业执照
		俱乐部身份:入住名称 +LOGO
		团队身份:入住名称+身份证号
			场馆身份:入住名称+营业执照+门头照片+联系人+联系人电话+身份证号+城市+详细地址
			教练身份:入住名称+身份证号+教练证
		-->
		<view class="mainpadding">
			<view class="ershiba xiaohei nofonweight" v-if="listid==''">入驻身份：</view>
			<view class="flexleft margin_top2 xiahuaxian"  v-if="listid==''">
				<view class="margin_right2" :class="type==1?'lvbtn':'huibtn'" @click="type=1">主办方</view>
				<view class="margin_right2" :class="type==2?'lvbtn':'huibtn'" @click="type=2">俱乐部</view>
				<view class="margin_right2" :class="type==3?'lvbtn':'huibtn'" @click="type=3">团队</view>
				<view class="margin_right2" :class="type==4?'lvbtn':'huibtn'" @click="type=4">场地</view>
				<view class="margin_right2" :class="type==5?'lvbtn':'huibtn'" @click="type=5">教练</view>
			</view>
			<view class="xiahuaxian margin_top flexbetween">
				<view class="ershiba xiaohei nofonweight" style="min-width: 160rpx;">入驻名称：</view>
				<input class="textright" type="text" placeholder="请输入名称" v-model="name">
			</view>
			<view class="xiahuaxian margin_top flexbetween" v-if="type==4">
				<view class="ershiba xiaohei nofonweight" style="min-width: 160rpx;">联系人：</view>
				<input class="textright" type="text" placeholder="请输入联系人姓名" v-model="username">
			</view>
			<view class="xiahuaxian margin_top flexbetween" style="min-width: 160rpx;" v-if="type==4">
				<view class="ershiba xiaohei nofonweight">联系电话：</view>
				<input class="textright" type="number" placeholder="请输入联系电话" v-model="mobile">
			</view>
			<view class="xiahuaxian margin_top flexbetween" style="min-width: 160rpx;" v-if="type==4 || type==5 || type==3">
				<view class="ershiba xiaohei nofonweight">身份证号：</view>
				<input class="textright" type="text" placeholder="请输入身份证号" v-model="idcard">
			</view>
			<view class="xiahuaxian margin_top flexbetween" style="min-width: 160rpx;" v-if="type==5">
				<view class="ershiba xiaohei nofonweight">证书编号：</view>
				<input class="textright" type="text" placeholder="请输入证书编号" v-model="zscode">
			</view>
			<uni-data-picker  v-if="type==4" @change="bindPickerChange" :localdata="items" placeholder="请选择住址" popup-title="请选择地区"
				v-model="area_id" class="zdy">
				<view class="xiahuaxian margin_top flexbetween">
					<view class="ershiba xiaohei nofonweight">城市：</view>
					<view class="flexright">
						<input type="text" class="textright" placeholder="请选择" v-model="city_text" disabled=""
							style="width: 80%;">
							<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</uni-data-picker>
			
			<!-- <view class="xiahuaxian margin_top">
				<view class="flexbetween">
					<view class="ershiba xiaohei nofonweight">详细地址：</view>
				</view>				
				<input class=" margin_top" type="text" placeholder="请输入详细地址" v-model="address">
			</view> -->
			<view class="xiahuaxian flexbetween margin_top"  v-if="type==4" @click="chooselocation">
				<view class="ershiba nofonweight xiaohei">地址</view>
				<view class="flexright">
					<input type="text" class="textright" placeholder="请选择" v-model="address" disabled=""
						style="width: 80%;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="xiahuaxian margin_top" v-if="type==2 || type==4">
				<view class="ershiba nofonweight xiaohei">LOGO</view>
				<view class="margin_top shangc" v-if="!image" @click="uploadImg(2)">
					<image src="../static/image/system/shangchuan.png" mode=""></image>
				</view>
				<view class="margin_top shangc" v-if="image" @click="uploadImg(2)">
					<image :src="image_text" mode=""></image>
				</view>
			</view>
			<view v-if="type==1 || type==4">
				<view class="margin_top titletext bold hei_text">营业执照</view>
				<view class="upzhizhao margin_top flexcenter" v-if="!yyzz_image" @click="uploadImg(1,yyzz_image,yyzz_image_text)">
					<u-icon name="plus" color="#999" size="28"></u-icon>
				</view>
				<view v-else @click="uploadImg(1,yyzz_image,yyzz_image_text)">
					<image :src="yyzz_image_text" class="upzhizhao margin_top" mode=""></image>
				</view>
			</view>
			<view v-if="type==5">
				<view class="margin_top titletext bold hei_text">教练证</view>
				<view class="upzhizhao margin_top flexcenter" v-if="!yyzz_image" @click="uploadImg(1,yyzz_image,yyzz_image_text)">
					<u-icon name="plus" color="#999" size="28"></u-icon>
				</view>
				<view v-else @click="uploadImg(1,yyzz_image,yyzz_image_text)">
					<image :src="yyzz_image_text" class="upzhizhao margin_top" mode=""></image>
				</view>
			</view>
			<view class="margin_top ffffff">
				<view class="flexleft" @click="checkbox = !checkbox">
					<!-- 已选中 -->
					<u-icon class="margin_right1" name="checkmark-circle-fill" color="#999" size="16" v-if="!checkbox"></u-icon>
					<u-icon class="margin_right1" name="checkmark-circle-fill" color="#1BA95B" size="16" v-if="checkbox"></u-icon>
					<!-- 未选中 -->
					<!-- <view class="wexuanzicon"></view> -->
					<view class="ershil nofonweight xiaohei">我已阅读并同意<text style="color: #1BA95B;" @click.stop="jumpurl('/pages/system/system?type=4')">《合作协议》</text></view>
				</view>
				<view class="bigbtn margin_top2" @click="submit()">确定</view>
			</view>
		</view>
		<!-- <view class="tupian" @click="show = true">
			<image src="../static/image/system/wyhz.png" mode=""></image>
		</view> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				show: false,
				items: citys.data,
				city_text: "",
				province_id: "",
				city_id: "",
				area_id: "",
				type:1,//身份:1=主办方,2=俱乐部,3=团队
				name:"",
				username:"",
				mobile:"",
				yyzz_image:"",
				yyzz_image_text:"",
				address:"",
				latitude:"",
				longitude:"",
				checkbox:false,
				listid:"",
				image_text:"",
				image:"",
				upvalue:1,//1营业执照，2logo
				idcard:"",
				zscode:""
			}
		},
		onLoad(options){
			if(options.id){
				this.listid = options.id
				this.init()
			}
		},
		methods: {
			chooselocation() {
				let _this = this
				uni.chooseLocation({
					success: function(response) {
						_this.address = response.address
						_this.latitude = response.latitude
						_this.longitude = response.longitude
					},
					fail(res) {
						console.log(res, "失败了");
					}
				})
			},
			init() {
				httpRequest.request('/api/user/userZbfapplyDetail', 'GET', {
					id:this.listid
				}, false, false, true).then(res => {
					let data = res.data
					this.type=data.type
					this.username=data.username
					this.mobile=data.mobile
					this.idcard = data.idcard
					this.name=data.name
					this.city_text=data.cityinfo
					this.province_id=data.province_id
					this.city_id=data.city_id
					this.area_id=data.area_id
					this.address=data.address
					this.latitude=data.latitude
					this.longitude=data.longitude
					this.yyzz_image=data.yyzz_image
					this.yyzz_image_text=data.yyzz_image_text
					this.image=data.logo
					this.image_text=data.logo_text
					this.zscode = data.zscode
				})
			},
			submit(){
				if(this.name==""){
					httpRequest.toast("请输入名称")
					return false
				}
				if(this.type==1){
					if(this.yyzz_image==""){
						httpRequest.toast("请上传营业执照")
						return false
					}
				}
				if(this.type==2){
					if(this.image==""){
						httpRequest.toast("请上传LOGO")
						return false
					}
				}
				if(this.type==3){
					if(this.idcard==""){
						httpRequest.toast("请输入身份证号")
						return false
					}
				}
				if(this.type==4){
					if(this.username==""){
						httpRequest.toast("请输入联系人姓名")
						return false
					}
					if(this.mobile==""){
						httpRequest.toast("请输入手机号")
						return false
					}
					if(this.idcard==""){
						httpRequest.toast("请输入身份证号")
						return false
					}
					if(this.area_id==""){
						httpRequest.toast("请选择城市")
						return false
					}
					if(this.address==""){
						httpRequest.toast("请选择详细地址")
						return false
					}
					if(this.image==""){
						httpRequest.toast("请上传LOGO")
						return false
					}
					if(this.yyzz_image==""){
						httpRequest.toast("请上传营业执照")
						return false
					}
				}
				if(this.type==5){
					if(this.idcard==""){
						httpRequest.toast("请输入身份证号")
						return false
					}
					if(this.zscode==""){
						httpRequest.toast("请输入证书编码")
						return false
					}
					if(this.yyzz_image==""){
						httpRequest.toast("请上传教练证")
						return false
					}
				}
				if(!this.checkbox){
					httpRequest.toast("请阅读并勾选合作协议")
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				let url = "/api/user/userZbfapply"
				let data = {
					type:this.type,
					name:this.name,
					username:this.username,
					mobile:this.mobile,
					province_id:this.province_id,
					city_id:this.city_id,
					area_id:this.area_id,
					address:this.address,
					longitude:this.longitude,
					latitude:this.latitude,
					yyzz_image:this.yyzz_image,
					idcard:this.idcard,
					logo:this.image,
					zscode:this.zscode,
				}
				if(this.listid){
					this.$set(data,"id",this.listid)
					url = "/api/user/editUserZbfapply"
				}
				httpRequest.request(url, 'GET', data).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			jumpurl(url){
				uni.navigateTo({
					url
				})
			},
			uploadImg(value, upImgs, upImgs_text) {
				let _this = this;
				this.upvalue = value
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					if(this.upvalue==1){
						this.yyzz_image = res.url;
						this.yyzz_image_text = image_item
					}else{
						this.image = res.url;
						this.image_text = image_item
					}
				
				}).catch(err => {});
			},
			bindPickerChange(val) {
				let area = val.detail.value
				let area_text = [area[0].text, area[1].text, area[2].text];
				this.city_text = area_text.join("/")
				this.province_id = area[0].value;
				this.city_id = area[1].value;
				this.area_id = area[2].value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #1BA95B;
	}
	.lvbtn{
		padding: 5rpx 20rpx;
		background:#1BA95B;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.huibtn {
		padding: 5rpx 20rpx;
		background: #F5F5F5;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tupian {
		width: 100%;
		height: 200rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.shangc {
		width: 160rpx;
		height: 160rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>